<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     *{ 
        margin:0;
        padding: 0;
     }
     .container{ display: flex;}
     .years {
        background-color: skyblue;
        width:35px;
        display: flex;
        flex-wrap: wrap;
     }
     .box {
        background-color: #ccc;
        width:410px;
        display: flex;
        flex-wrap: wrap;
     }

     .box > div {
        width:30px;
        height:30px;
        background-color: beige;
        margin:2px;
        color: skyblue;
     }
     .years > div{
        width:30px;
        height:30px;
        background-color: beige;
        margin:2px;
        color: red;
        font-size: 12px;
        text-align: center;
        line-height: 30px;
     }
    </style>
</head>
<body>
    <h1>100年计划</h1>
    <div class="container">
        <div class="years"></div>
        <div class="box"></div>
    </div>

    <script>
     var birthday = '2000-10-1';
     var box = document.querySelector(".box");
     var years = document.querySelector(".years");

     for(let y =0;y<100;y++){
        let d = document.createElement('div');
        d.innerText= (y+1) +'岁';
        years.appendChild(d);
     }

     for(let i =0;i<100;i++){
        for(let m =0;m< 12 ;m++){
            let d = document.createElement('div');
            d.innerText= m+1;
            box.appendChild(d);
        }
     }

    </script>
</body>
</html>